<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Ajax Grid Example</title>
<style type="text/css">
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojox/grid/resources/dojo.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojox/grid/resources/Grid.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojox/grid/resources/tundraGrid.css";
   @import "./files/general.css";
   
   body { padding:0 }
   
</style>
<script>
   djConfig={ baseUrl: 'http://localhost:8081/', modulePaths: {'ajax.example': 'example'} }
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAv55cC37g-7Kq0tZb3OOnqRTwM0brOpm-All5BF6PoaKBxRWWERRopPeKbGp5uXcFQgkoxJ3wFnVHvA" type="text/javascript"></script>
<script type="text/javascript">
  
 dojo.require("dojo.data.ItemFileReadStore");
 dojo.require("dojox.grid.DataGrid");

 var map = null;
 
 var grid = null;

 function display(event){
   
    var row = grid.getItem( event.rowIndex );
    
    var point = new GLatLng( row[ "lat" ], row[ "long" ] );
    
    map.addOverlay( new GMarker(point) );
    
 }


 function initializeMap(){
 
   if( GBrowserIsCompatible() )
   {
       map = new GMap2(document.getElementById("map_canvas"));
       map.setCenter(new GLatLng(45.2936880, -75.8653990 ), 13);
       map.setUIToDefault();
   }
 
 }

function start(){

   initializeMap();
   
   var jsonstore = new dojo.data.ItemFileReadStore( { url: "fieldjson" } );
   
   var layout = [ { field: "fieldname", width: "auto", name: "Field Name" },
                  { field: "address", width: "100px", name: "Field Address" },
                  { field: "lat", width: "100px", name: "Lattitude" },
                  { field: "long", width: "100px", name: "Longitude" } ];
                  
   grid = new dojox.grid.DataGrid( { query: { fieldname: '*' },
                                         store: jsonstore,
                                         structure: layout,
                                         rowsPerPage: 20,
                                         onRowClick: display }, 'gridNode' );
                                         
   grid.startup();
                  
   

}

dojo.addOnLoad( start );



</script>
<body class="tundra" >
	<div>Dojo Map Application</div>
	<div id="myapplication" class="partsContainer">
	   <div class="gridContainer">
	     <div id="gridNode"/>
	   </div>
	</div>
	<div id="map_canvas" style="width:500px;height:350px"/>
</body>
</html>



